<template>
    <view class="h-[100vh]">
        <z-paging
            ref="paging"
            v-model="articleData.articleList"
            @query="getArticleList"
            auto-show-back-to-top
            :default-page-size="6"
            :fixed="false"
            height="100%"
        >
            <template #top>
                <view class="h-[180rpx] mb-2 bg-white">
                    <search />
                    <u-tabs
                        :list="articleData.cateList"
                        :lineColor="articleData.style?.color"
                        :activeStyle="{ fontSize: '18px', color: articleData.style?.color }"
                        @click="cateClick"
                    ></u-tabs>
                </view>
                <view
                    class="h-[100rpx] mb-2 bg-white"
                    v-if="articleData.cateItemList.length > 0"
                >
                    <u-tabs
                        :list="articleData.cateItemList"
                        :lineColor="articleData.style?.color"
                        :activeStyle="{ fontSize: '18px', color: articleData.style?.color }"
                        @click="cateItemClick"
                    ></u-tabs>
                </view>
            </template>
            <view v-for="item in articleData.articleList" :key="item.id">
                <articleItem :item="item" :id="item.id"></articleItem>
            </view>
            <template #bottom>
                <tabbar></tabbar>
            </template>
        </z-paging>
    </view>
</template>

<script setup lang="ts">
import { shallowRef, reactive } from "vue";
import useConfigStore from "@/stores/config";
import { cateList } from "@/api/cms/cate";
import { articleList } from "@/api/cms/article";

const paging = shallowRef();

const articleData = reactive({
    cateList: [],
    cateItemList: [],
    cateId: "",
    articleList: [],
    style: {} as any,
});

const cateClick = (item) => {
    articleData.cateId = item.id;
    if (item?.children && item.children.length > 0) {
        const add: any[] = [
            {
                id: item.id,
                name: "全部",
            },
        ];
        articleData.cateItemList = JSON.parse(JSON.stringify(item.children));
        articleData.cateItemList.unshift(...add);
    } else {
        articleData.cateItemList = [];
    }
    paging.value.reload();
};

const cateItemClick = (item) => {
    articleData.cateId = item.id;
    paging.value.reload();
};

const getArticleStyle = async () => {
    articleData.style = useConfigStore().styleConfig;
};

const getCateList = async () => {
    const res = await cateList();
    const item: any[] = [
        {
            id: null,
            name: "全部",
        },
    ];

    articleData.cateList = JSON.parse(JSON.stringify(res));
    articleData.cateList.unshift(...item);
};

const getArticleList = async (pageNum, pageSize) => {
    try {
        const res = await articleList({
            cate_id: articleData.cateId,
            page_num: pageNum,
            page_limit: pageSize,
        });
        paging.value.complete(res.list);
    } catch (error) {
        paging.value.complete(false);
    }
};

getArticleStyle();
getCateList();
</script>

<style lang="scss" scoped></style>
